<template>
    <div class="echarts_content">
        <div :id="id" :class="className" :style="{width: width, height: height}" :ref="`ref_${id}`"/>
    </div>
</template>

<script>
    export default {
        name: "Echarts",
        props: {
            id: {
                type: String,
                default: 'chart_container',
            },
            width: {
                type: String,
                default: '400px',
            },
            height: {
                type: String,
                default: '300px',
            },
            className: {
                type: String,
                default: undefined,
            },
            options: {
                type: Object,
                default () {
                    return {
                        title: {
                            text: 'ECharts 入门示例'
                        },
                        tooltip: {},
                        legend: {
                            data: ['销量']
                        },
                        xAxis: {
                            data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"]
                        },
                        yAxis: {},
                        series: [{
                            name: '销量',
                            type: 'bar',
                            data: [5, 20, 36, 10, 10, 20]
                        }]
                    };
                },
            },
            clickEvent: {
                type: Function,
                default: () => {},
            }
        },
        data () {
            return {
                echartsObj: {},
                chartOption: {},
            };
        },
        watch: {
            options: {
                handler () {
                    this.initEcharts();
                },
                deep: true
            },
        },
        created () {
            let _this = this;
            _this.initEcharts();
            $(window).off('resize').on('resize', () => {
                _this.resizeCharts();
            });
        },
        methods: {
            initEcharts () {
                let _this = this;
                _this.chartOption = $.extend({}, _this.options);
                _this.$nextTick(() => {
                    let myCharts = _this.$echarts.init(document.getElementById(_this.id));
                    myCharts.resize();
                    myCharts.setOption(_this.chartOption);
                    myCharts.off('click');
                    myCharts.on('click', _this.clickEvent);
                    _this.echartsObj[_this.id] = myCharts
                });
            },
            resizeCharts () {
                if (this.echartsObj[this.id]) {
                    this.echartsObj[this.id].resize();
                }
            },
            clearECharts () {
                if (this.echartsObj[this.id]) {
                    this.echartsObj[this.id].clear();
                    this.echartsObj[this.id] = undefined;
                }
            },
        },
        beforeDestroy () {
            if (this.echartsObj[this.id]) {
                this.echartsObj[this.id].clear();
                this.echartsObj[this.id] = undefined;
            }
        }
    }
</script>

<style lang="less" rel="stylesheet/less" scoped>
    .echarts_content {
        height: 100%;
    }
</style>
